<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>
		
		<view class="nav_box"></view>
		
		<view class="logo flex_c">
			<image :src="data.logo" mode="aspectFill"></image>
			<view>{{ data.guild_name }}</view>
			<text>公会ID:{{ data.id }}</text>
		</view>
		
		<view class="text">
			<view class="list flex_r_between">
				<text>公会长姓名</text>
				<text>{{ data.name }}</text>
			</view>
			<view class="list flex_r_between">
				<text>公会长身份证号</text>
				<text>{{ data.id_card_num }}</text>
			</view>
			<view class="list">
				<text>身份证正反面</text>
				<view class="image flex_r_between">
					<image :src="data.id_card_z" mode="aspectFill"></image>
					<image :src="data.id_card_f" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		
		<view class="btn flex_r_around">
			<view class="btn-item accept flex_r_around" @click="show = true">
				<text>拒绝</text>
			</view>
			<view class="btn-item agree flex_r_around" @click="onAgree">
				<text>同意</text>
			</view>
		</view>
		
		<u-popup :show="show" @close="show = false" mode="center" round="40rpx">
			<view class="modal">
				<view class="modal_title flex_r_between">
					<text>拒绝原因</text>
					<u-icon name="close-circle" color="#CCCCCC" size="48rpx" @click="show = false"></u-icon>
				</view>
		
				<view class="modal_textarea">
					<textarea placeholder="请输入" placeholder-class="input-placeholder" v-model="check_remark"></textarea>
				</view>
		
				<view class="modal_btn flex_r_around" @click="onAccept">
					<text>确定</text>
				</view>
		
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				data: {},
				
				circle_id: 0,
				
				show: false,
				check_remark: '',
			}
		},
		methods: {
			onAgree() {
				this.$post('/circle.guild/setReviewStatus', {
					status: 2,
					circle_id: this.circle_id,
					guild_id: this.data.id,
				}).then(res => {
					this.$util.msg(res.msg);
					setTimeout(()=>{
						this.$util.back();
					},1000)
				})
			},
			
			beforeAccept() {
				this.show = true;
			},
			
			onAccept() {
				this.$post('/circle.guild/setReviewStatus', {
					status: 3,
					circle_id: this.circle_id,
					guild_id: this.data.id,
					check_remark: this.check_remark
				}).then(res => {
					this.show = false;
					this.$util.msg(res.msg);
					setTimeout(()=>{
						this.$util.back();
					},1000)
				})
			},
			
			getData(){
				this.$get('/circle.guild/getInfo',{
					guild_id: this.id
				}).then(res=>{
					this.data = res.data;
				})
			},
		},
		
		onLoad(option) {
			if(option.id){
				this.id = option.id;
				this.circle_id = option.circle_id;
			}else {
				this.id = '11002612'
			}
			
			this.getData();
		}
	}
</script>

<style lang="less" scoped>
	
	.page {
		background: #FFF;
		min-height: 100vh;
		padding: 32rpx;
	}
	
	.nav_bar {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/newstore/new_store_background.png) 0 0 no-repeat;
		background-size: 100%;
	
		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}
	
	.logo {
		image {
			width: 176rpx;
			height: 176rpx;
			background: #D8D8D8;
			border-radius: 24rpx;
		}
		
		view {
			font-weight: 600;
			font-size: 32rpx;
			color: #131313;
			margin: 16rpx 0;
		}
		
		text {
			font-size: 24rpx;
			color: #666666;
		}
	}
	
	.text {
		margin-top: 60rpx;
		.list {
			padding: 10rpx 0;
			text {
				font-size: 28rpx;
				color: #131313;
			}
			
			.image {
				margin-top: 32rpx;
				image {
					width: 336rpx;
					height: 212rpx;
				}
			}
		}
	}
	
	.btn {
		margin-top: 80rpx;
		.btn-item {
			width: 288rpx;
			height: 88rpx;
			border-radius: 48rpx;
			text {
				font-size: 32rpx;
			}
		}
		
		.agree {
			border: 2rpx solid #1FC129;
			text {
				color: #1FC129;
			}
		}
		
		.accept {
			border: 2rpx solid #FD2A53;
			text {
				color: #FD2A53;
			}
		}
	}
	
	.modal {
		width: 616rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		padding: 34rpx 16rpx 38rpx 32rpx;
	
		.modal_title {
			text {
				font-weight: 500;
				font-size: 36rpx;
				color: #131313;
				line-height: 50rpx;
			}
		}
	
		.modal_textarea {
			width: 552rpx;
			height: 208rpx;
			background: #F7F7F7;
			border-radius: 16rpx;
			padding: 24rpx;
			margin: 32rpx 0;
			overflow: hidden;
	
			textarea {
				font-size: 28rpx;
				color: #333;
				line-height: 36rpx;
			}
		}
	
		.modal_btn {
			width: 320rpx;
			height: 88rpx;
			background: #FD2A53;
			border-radius: 44rpx;
			margin: 0 auto;
	
			text {
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	
	}
	
</style>
